<template>
  <div class="flex flex-col h-screen">
    <!-- 现有账户列表 -->
    <div class="flex-1">
      <template v-if="accountList.length">
        <div
          v-for="item in accountList"
          :key="item.env"
          class="p-4 border-b flex items-center justify-between"
          @click="switchAccount(item)"
        >
          <div class="flex items-center">
            <div class="mr-2">
              <van-tag :type="getEnvTagType(item.env)">{{ getEnvText }}</van-tag>
            </div>
            <div>{{ item.userInfo.name }}</div>
          </div>
          <van-icon name="arrow" />
        </div>
      </template>

      <!-- 空状态 -->
      <van-empty v-else class="mt-32" description="暂无账号信息" />
    </div>

    <!-- 添加按钮 -->
    <div class="p-4 border-t">
      <van-button block type="primary" @click="showDialog = true"> 添加账号 </van-button>
    </div>

    <!-- Vant 弹窗 -->
    <van-dialog
      v-model:show="showDialog"
      title="添加账号"
      show-cancel-button
      @confirm="handleAddAccount"
    >
      <div class="p-4">
        <van-cell-group>
          <van-field
            label="环境"
            readonly
            :model-value="getEnvText"
            placeholder="请选择环境"
            @click="showPicker = true"
          />
          <van-field
            v-model="formData.userInfo"
            label="用户信息"
            type="textarea"
            placeholder="请输入用户名"
          />
        </van-cell-group>
      </div>
    </van-dialog>

    <!-- 环境选择器 -->
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        :columns="envOptions"
        @confirm="onConfirmEnv"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { useAccountStore } from "@/store/modules/changeAccount";
import { computed, ref } from "vue";
import { showToast } from "vant";

const accountStore = useAccountStore();
const accountList = computed(() => accountStore.accountList);

// 弹窗控制
const showDialog = ref(false);
const showPicker = ref(false);

// 环境选项
const envOptions = [
  { text: "蓝环境", value: "blue" },
  { text: "测试环境", value: "test" },
  { text: "正式环境", value: "release" },
];

// 表单数据
const formData = ref({
  env: "test",
  userInfo: "",
});

// 获取环境显示文本
const getEnvText = computed(() => {
  const option = envOptions.find((opt) => opt.value === formData.value.env);
  return option ? option.text : "";
});

// 确认环境选择
const onConfirmEnv = (item) => {
  const { selectedOptions } = item;
  console.log("onConfirmEnv: ", selectedOptions);
  formData.value.env = selectedOptions[0].value;
  showPicker.value = false;
};

// 添加账号处理
const handleAddAccount = () => {
  if (!formData.value.env || !formData.value.userInfo) {
    showToast("请填写完整信息");
    return;
  }
  let userInfo = JSON.parse(formData.value.userInfo);
  if (!userInfo.token) {
    showToast("用户信息不合符");
    return;
  }
  formData.value.userInfo = userInfo;

  accountStore.addAccount(formData.value);

  // 重置表单
  formData.value = {
    env: formData.value.env,
    userInfo: {},
  };
};

// 获取环境标签类型
const getEnvTagType = (env) => {
  const typeMap = {
    blue: "primary",
    test: "warning",
    release: "success",
  };
  return typeMap[env] || "default";
};

// 切换账号
const switchAccount = (account) => {
  try {
    // 保存用户信息到本地存储
    localStorage.setItem("yxt-userInfo", JSON.stringify(account.userInfo));
    localStorage.setItem("fast-token", account.userInfo.token);

    // 显示切换成功提示
    showToast({
      type: "success",
      message: `已切换到${account.userInfo.name}`,
      position: "center",
    });

    // 可选：刷新页面使新配置生效
    setTimeout(() => {
      window.location.reload();
    }, 1000);
  } catch (error) {
    showToast({
      type: "fail",
      message: "切换环境失败",
      position: "top",
    });
  }
};
</script>

<style scoped>
:deep(.van-field__label) {
  width: 60px;
}

.van-tag {
  padding: 2px 6px;
}

/* 添加点击效果 */
.border-b {
  cursor: pointer;
  transition: background-color 0.2s;
}

.border-b:active {
  background-color: #f5f5f5;
}
</style>
